import React, { Component } from "react";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./component.less";
import { formatDate } from "./modal";

type XScrollPickerProps = {
    data: any[],
    value: number,
    onChange?: (value: number) => any
    width?: number
    left?: number
}

type XScrollPickerState = {
}

export class XScrollPicker extends Component<XScrollPickerProps, XScrollPickerState> {
    node: HTMLDivElement;
    X: number;
    flag: boolean;
    select: number;
    constructor(props: XScrollPickerProps) {
        super(props);
        this.flag = false;
        this.select = props.value;
    }

    onMoveStart(e: React.MouseEvent) {
        this.X = e.clientX;
        this.flag = true;
    }
    onMove(e: React.MouseEvent) {
        if (this.flag) {
            let x = this.X - e.clientX;
            if (this.node.scrollLeft >= 0 && this.node.scrollLeft < this.node.scrollWidth) {
                this.node.scrollTo({ left: this.node.scrollLeft + x });
                this.X = e.clientX;
            }
        }
    }

    onMoveEnd(e: React.MouseEvent) {
        this.flag = false;
    }

    render() {
        return (
            <div
                ref={(node) => { this.node = node }}
                className="pcy-scroll-x"
                style={{
                    position: "relative",
                    height: "2rem",
                    borderBottom: "1px solid #eee",
                }}
                onMouseDown={this.onMoveStart.bind(this)}
                onMouseMove={this.onMove.bind(this)}
                onMouseUp={this.onMoveEnd.bind(this)}
                onMouseLeave={this.onMoveEnd.bind(this)}
            >
                <View style={{
                    display: "flex",
                    position: "absolute",
                    padding: "0 1rem 0 0.1rem",
                }}>
                    {this.props.data.map((item, index) => {
                        return <View
                            className="year-piker-item"
                            onClick={() => {
                                if (this.props.onChange && this.select !== index) {
                                    this.select = index;
                                    this.props.onChange(index);
                                }
                            }}
                            style={{
                                width: `${this.props.width ? this.props.width : 3}rem`,
                                textAlign: "center",
                                fontSize: "0.6rem",
                                color: "#666",
                                height: "2rem",
                                lineHeight: "2rem"
                            }}
                        >
                            {"" + item}
                        </View>
                    })}

                </View>
                <View
                    className="line"
                    style={{
                        position: "absolute",
                        left: `${0.4 + this.props.value * (this.props.width ? this.props.width : 3)}rem`,
                        bottom: "0px",
                        width: `${this.props.width ? this.props.width - 0.6 : 2.4}rem`,
                        height: "3px",
                        transition: "all 0.2s ease",
                    }}
                />
            </div>
        )
    }
}


type AgreedData = {
    aid: number
    uid: string
    mid: number
    start_time: number
    end_time: number
    reason: string
    note: string
    status: string
    approver: string //审批人
    group?: number
    area: number
    authority: number
    department: string
    mname: string
    uname: string
    wifi: number
}

type ApproveItemProps = {
    data: AgreedData
    onClick?: () => any
}

enum status {
    "wait" = "等待中",
    "refuse" = "已拒绝",
    "pass" = "已通过",
    "timeout" = "已超时"
}

enum color {
    "wait" = "#014A95",
    "refuse" = "#ee6e6e",
    "pass" = "#88e66b",
    "timeout" = "#ffce49"
}

export class ApproveStatusText extends Component<{ status: string }, any> {
    constructor(props) {
        super(props);
    }

    render() {
        return <Text style={{ color: color[this.props.status] }}>{status[this.props.status]}</Text>
    }
}

export class ApproveItem extends Component<ApproveItemProps, any> {
    constructor(props: ApproveItemProps) {
        super(props);
    }

    render() {
        return (
            <div
                className="my-Approve-item"
                onClick={this.props.onClick}
            >
                <View
                    className="approve-item-card-header"
                    style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        backgroundColor: color[this.props.data.status]
                    }}>
                    <View style={{ fontSize: "0.8rem" }}>{this.props.data.mname}</View>
                    <View style={{ fontSize: "0.5rem" }}>{status[this.props.data.status]}</View>
                </View>
                <View className="approve-item-card-body">
                    <View style={{
                        display: "flex",
                        justifyContent: "space-between"
                    }}>
                        <View className="approve-text-not-primary">申请时间：{formatDate(new Date(this.props.data.start_time), "yyyy年MM月dd日")}</View>
                        {this.props.data.uname ? <View className="approve-text-not-primary">申请人：{this.props.data.uname}</View> : ""}
                    </View>
                    <View
                        className="time"
                        style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center"
                        }}
                    >
                        <View className="hour-min">{formatDate(new Date(this.props.data.start_time), "HH:mm")}</View>
                        <div style={{
                            width: "2rem",
                            height: "3px",
                            backgroundColor: "#222"
                        }}></div>
                        <View className="hour-min">{formatDate(new Date(this.props.data.end_time), "HH:mm")}</View>
                    </View>
                    <View className="approve-text-not-primary">申请理由：{this.props.data.reason}</View>
                </View>

            </div>
        )
    }
}